<template>
    <div>
        <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1" @click="goIndex">首页</el-menu-item>
            <el-menu-item index="2" @click="goAttention">关注</el-menu-item>
            <el-menu-item index="3" @click="goArticle">写文章</el-menu-item>
            <el-menu-item index="4" @click="goLogin" v-if="token==null" >登录</el-menu-item>
            <el-menu-item index="5" @click="goLogout" v-if="token!=null">退出</el-menu-item>
            <el-menu-item index="6" @click="goAboutMe">
                <el-avatar v-if="avatar = !null" :src="showAvatar"></el-avatar>
                <el-avatar v-if="avatar == null">未登录</el-avatar>
                <span style="margin-left:10px" v-if="avatar = !null">{{
                        username
                }}</span>
                <span style="margin-left:10px" v-if="this.$store.state.user.avatar == ''">未登录</span>
            </el-menu-item>
            <el-menu-item index="7">
                <el-input placeholder="搜索你想知道的文章" prefix-icon="el-icon-search" v-model="inputSearch">
                </el-input>
                <el-button type="primary" @click="goSearch"><i class="el-icon-search"></i>get it</el-button>
            </el-menu-item>
            <el-menu-item index="8" style="margin-left:100px">

                <el-button round @click="dialogTableVisible = true"><i class="el-icon-date"></i></el-button>
            </el-menu-item>
        </el-menu>
        <el-dialog title="fscummer-1.0.1" :visible.sync="dialogTableVisible">
            <div class="block">
                <el-timeline>
                    <el-timeline-item timestamp="2022/8/11" placement="top">
                        <el-card>
                            <h4>更新日志</h4>
                            <p>
                                1.修复评论内容无法点击
                                2.修复文章标签查询错误
                                3.修复数据库时间问题
                                4.新增添加文章分类功能
                            </p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getToken,getUserName,getUserId,getAvatar } from '@/utils/auth'
import { Message } from 'element-ui';
export default {
    data() {
        return {
            inputSearch: '',
            dialogTableVisible: false,
            showAvatar:''
        }
    },
    created() {
        var token = getToken()
        var avatar=getAvatar()
        console.log('avatar',avatar)
        if (token == undefined) {

        } else {
            var username = getUserName()
            if (username == ""||username==null||username==undefined) {
                this.getUserInfo()
            }
        }
    },
    watch: {

    },
    computed:{
        avatar(){
            var avatar=getAvatar()
            if(avatar==null||avatar==''){
                 return null
            }else{
                this.showAvatar=avatar
                return avatar
            }
        },
        username(){
            var username=getUserName()
             if(username==null||username==''||username==undefined){
                return '查询错误'
             }else{
                 return username
             }
        },
        token(){
           var token=getToken()
            if(token==''||token==null){
                return null
            }else{
                return token
            }
        }
    },
    beforeDestroy() {
        var inputSearch = this.inputSearch
        if (inputSearch != '') {
            console.log('beforedestory发送了',inputSearch)
            this.$bus.$emit('getInputContent', inputSearch)
        }
        },
        methods: {
            goLogin(){
                this.$router.push({
                    name: 'login'
                })
            },
            goIndex() {
                this.$router.push({
                    name: 'index'
                })
            },
            goArticle() {
                this.$router.push({
                    name: 'writeArticle'
                })
            },
            goAttention() {
                this.$router.push({
                    name: 'attention'
                })
            },
            goAboutMe() {
                var token = getToken()
                if (token == undefined) {
                    this.$router.push({
                        name: 'login'
                    })
                    Message({
                        type: 'error',
                        message: '你还未登录,请先登录'
                    })
                } else {
                    this.$router.push({
                        name: 'about'
                    })
                }
            },
            goSearchRouter() {
                this.$router.push({
                    name: 'search'
                })
            },
            goLogout() {
                this.$confirm('你是否选择退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('Logout').then(() => {
                        location.reload()
                    })
                    this.$router.push({
                        name: 'login'
                    })
                    this.$message({
                        type: 'success',
                        message: '退出成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消退出'
                    });
                });
                this.dialogVisible = true
            },
            goSearch() {
                var inputSearch = this.inputSearch
                if (inputSearch != '') {
                    this.$bus.$emit('getInputContent', inputSearch)
                    this.$router.push({
                        name: 'search'
                    })
                } else {
                    Message({
                        type: 'error',
                        message: '搜索的内容不能为空'
                    })
                }
            },
            getUserInfo() {
                this.$store.dispatch('GetInfo').then(() => {
                })
            },

        }
    }
</script>

<style>
</style>